<template>
<header class="head">
	<div class="center-width clearfix">
		<div class="logo fl">
			<img src="../assets/img/logo.png" class="img">
			<h1 class="title">中粮数字健康云平台</h1>
		</div>
		<div class="nav-btn">
			<span class="nav-show" @click="showNav" v-if="navFlag"></span>
			<span class="nav-close icon-close2" @click="hideNav" v-else></span>
		</div>
		<ul class="nav" ref="nav">
			<li :class="{on:nav===0}" class="item"><router-link to='/index'>首页</router-link></li>
			<li :class="{on:nav===1}" class="item"><router-link to='/service/recipe'>服务</router-link></li>
			<li :class="{on:nav===2}" class="item"><router-link to='/product'>产品案例</router-link></li>
			<li :class="{on:nav===3}" class="item"><router-link to='/linkUs'>联系我们</router-link></li>
		</ul>
	</div>
</header>
</template>
<script>
    export default {
        data() {
            return {
                navFlag: true
            }
        },
        props: {
            nav: {
                type: Number
            }
        },
        created() {
            console.log(this.nav)
        },
        methods: {
            showNav() {
                this.$refs.nav.style.display = 'block'
                this.navFlag = false
            },
            hideNav() {
                this.$refs.nav.style.display = 'none'
                this.navFlag = true
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
@media screen and (min-width: 800px) and (max-width: 1000px)
	header
		.center-width
			.nav
				.item
					margin 0 25px
@media screen and (min-width: 600px) and (max-width: 800px)
	.head
		position relative
		.center-width
			.nav
				.item
					margin 0 25px
			.logo
				.title
					display none
@media screen and (max-width: 600px)
	.head
		height 50px
		position relative
		.center-width
			.logo
				height 34px
				margin-top 8px
				.img
					width 34px
					height 34px
				.title
					font-size 15px
					line-height 34px
					margin-left 4px
			.nav-btn
				display block
			.nav
				position absolute
				display none
				width 100%
				padding 12px 5px
				background-color rgba(0, 0, 0, .85)
				top 50px
				margin-top 0px
				height auto
				li
					display inline-block
					line-height 30px
					margin 5px 15px
					&.on
						border-bottom none
					a, a:hover, a:active
						color #fff
						font-size 14px
header
	width 100%
	background-color rgba(0, 0, 0, .85)
	height 85px
	// position fixed
	// top 0px
	// box-shadow 0 2px 34px 4px rgba(0, 0, 0, .3)
	// z-index 100
	.center-width
		max-width 1300px
		color #fff
		margin auto
		position relative
		.logo
			height 52px
			margin-top 16px
			margin-left 5px
			img
				width 53px
				height 52px
			h1
				font-size 22px
				line-height 53px
				display inline-block
				vertical-align top
				margin-left 12px
		.nav
			height 36px
			margin-top 22px
			float right			
			li
				display inline-block
				line-height 36px
				margin 0 46px
				font-size 16px
				&.on
					border-bottom 2px solid #fff
				a, a:hover, a:active
					color #fff
					font-size 16px
		.nav-btn
			width 30px
			height 30px
			position absolute
			right 10px
			top 10px
			display none
			.nav-show
				width 30px
				height 30px
				background-image url('../assets/img/nav.png')
				background-size 100%
				background-repeat no-repeat
				display block
			.nav-close
				color #fff
				font-size 30px
				line-height 30px
</style>
